<template>
	<div>
		<el-card class="right-box">
			<span style="font-size: 18px;font-weight: bolder;">推荐文章</span>
			<ul>
				<li class="wz-tj" v-for="item in article" :key="item.id">
						<div class="top-box">
							<span>
								<img style="width: 20px;" src="../../assets/icon/icon_文章.png" alt="">
							</span>
							<span style="margin-left: 10px;">{{ item.name }}</span>
						</div>
					<span class="ll-sp"> {{item.browse+'浏览'}}-{{item.comment+'评论'}}</span>
				</li>
			</ul>
		</el-card>
	</div>
</template>

<script>
export default {
	name: 'FrontendVue2Article',

	data() {
		return {
			article:[
				{
					id:1,
					name:'POM文件总体配置说明',
					browse:'333',
					comment:'120'
				},
				{
					id:2,
					name:'Elastic索引库和文档的使用',
					browse:'333',
					comment:'120'
				},
				{
					id:3,
					name:'SpringCloud01认识微服务',
					browse:'333',
					comment:'120'
				},
				{
					id:4,
					name:'shopping项目日志',
					browse:'333',
					comment:'120'
				},
				{
					id:5,
					name:'shopping项目日志',
					browse:'333',
					comment:'120'
				},
				{
					id:6,
					name:'shopping项目日志',
					browse:'333',
					comment:'120'
				},
				{
					id:7,
					name:'shopping项目日志',
					browse:'333',
					comment:'120'
				},
				{
					id:8,
					name:'shopping项目日志',
					browse:'333',
					comment:'120'
				},
				{
					id:9,
					name:'shopping项目日志',
					browse:'333',
					comment:'120'
				},
			]
		};
	},

	mounted() {
		
	},

	methods: {
		
	},
};
</script>

<style lang="less" scoped>
.right-box{
      width: 340px;
      // height: 600px;
      // background-color: violet;
      border-radius: 15px;
    }
		ul{
			display: flex;
			flex-direction: column;
			cursor :pointer;
			justify-content: center;
		}
		.wz-tj{
			width: 100%;
			height: 60px;
			margin-top: 10px;
			border-radius:8px ;
			display: flex;
			flex-direction: column;
			.top-box{
				margin: 10px 0 0px 8px;
				display: flex;
			}
		}
		.ll-sp{
			font-size: 12px;
			color: rgba(128, 128, 128, 0.767);
			margin-left: 38px;
		}
		.wz-tj:hover{
			background-color: rgba(160, 160, 160, 0.205);
			span{
			color: #409eff;
			}
		}
</style>